<script setup>
import { computed } from "vue";

import { useCalendarStore } from "../stores/calendar";

import { storeToRefs } from "pinia";

const Calendar = useCalendarStore();

const { currentDate, currentMonth, currentYear } = storeToRefs(Calendar);

// 格式化显示当前日期: 七月初五 甲辰年 龙
import LunarCalendar from "lunar-calendar";

const dateText = computed(() => {
  const lunar = LunarCalendar.solarToLunar(
    currentYear.value,
    currentMonth.value,
    currentDate.value
  );
  console.log(lunar);
  return lunar;
});

</script>

<template>
  <div class="footer">
    <div class="text">
      <div class="date">
        <span class="month">{{ dateText.lunarMonthName }} {{ dateText.lunarDayName }} </span
        ><br />
        <span>{{ dateText.GanZhiYear }}年 {{ dateText.zodiac }}</span>
      </div>
      <div class="comments">
        <span>本日天气：晴</span><br />
        <span>空气质量：优</span><br />
      </div>
    </div>
  </div>
</template>

<style scoped>
.footer {
  height: 100px;
  background: #f4f5f8;
  border-radius: 16px;
  padding: 20px 30px;
}

.text {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #767373;
}

.date {
  margin-right: 100px;
  font-weight: 600;
}

.month {
  font-size: 18px;
  margin-bottom: 10px;
}
</style>